/*
 * @Description:
 * @Autor: lcz
 * @Date: 2022-06-14 21:16:50
 * @LastEditors: lcz
 * @LastEditTime: 2023-01-10 12:21:27
 */
// import { FC } from 'react'
// import { useCallback } from 'react'
// import AffixComponent from '../../components/AffixComponent'
// // import '../node_modules/antd/dist/antd'
// // import './ui/DtAffix.css'
// const Affix: FC = () => {
//   const onChange = useCallback((affix: boolean) => {
//     console.log(affix)
//     if (affix) {
//       console.log('执行')
//     } else {
//       console.log('取消执行')
//     }
//   }, [])

//   return (
//     <div style={{ height: '2000px' }} className='mx-scrollcontainer-wrapper' id='layoutContentContainer'>
//       <AffixComponent offsetTop={10} onChange={onChange}>
//         <div>1231231232131</div>
//       </AffixComponent>
//     </div>
//   )
// }

// export default Affix

import React, { useState, FC } from 'react';
import { AgGridReact } from 'ag-grid-react';

import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';

const Affix: FC = () => {
  const [rowData] = useState([
    { make: 'Toyota', model: 'Celica', price: 35000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Porsche', model: 'Boxster', price: 72000 },
  ]);

  const [columnDefs] = useState([{ field: 'make' }, { field: 'model' }, { field: 'price' }]);

  return (
    <div className='ag-theme-alpine' style={{ height: 400, width: 600 }}>
      <AgGridReact rowData={rowData} columnDefs={columnDefs}></AgGridReact>
    </div>
  );
};
export default Affix
